<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户登录中心</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <link href="/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="/css/font-awesome.min.css" rel="stylesheet">
    <link href="/css/toastr.min.css" rel="stylesheet">
    <link href="/css/ladda-themeless.min.css" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/loginstyle.css" rel="stylesheet">
    <link href="/plugins/slide-capcha/slide-capcha.css" rel="stylesheet">

    <script type="text/javascript" src="/css/jquery.min.js"></script>
    <script type="text/javascript" src="/plugins/bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript" src="/plugins/slide-capcha/slide-capcha.js"></script>
    <script type="text/javascript" src="/css/toastr.min.js"></script>
    <script type="text/javascript" src="/css/spin.min.js"></script>
    <script type="text/javascript" src="/css/ladda.min.js"></script>
    <script type="text/javascript" src="/css/ladda.jquery.min.js"></script>
    <script type="text/javascript" src="/css/seller.js"></script>
    <style>
        input:hover, input:focus {
            border: 1px solid #139ff0 !important;
        }

        input {
            border-radius: 2px !important;
            height: 50px !important;
        }

        .ladda-button {
            height: 50px !important;
            margin-top: 40px;
        }

        body {
            background-color: #fff;
        }

        .loginscreen {
            background: url("https://hngpmall.oss-cn-shanghai.aliyuncs.com//upload/image/20190720/1563620535941676713.png") center center no-repeat;
            width: 100%;
            height: calc(100% - 130px);
            position: relative;
        }

        .header {
            height: 130px;
            display: flex;
            padding-left: 15%;
            padding-bottom: 20px;
            align-items: flex-end;
            justify-content: flex-start;
        }

        .header a {
            width: 230px;
        }

        .header h2 {
            margin-left: 20px;
        }

        .form-box {
            width: 100%;
            display: inline-block;
        }


        @media (min-width: 992px) {
            .form-box {
                width: 500px;
                position: absolute;
                top: 60px;
                right: 160px;
            }

            .loginscreen {
                text-align: right;
                height: 600px;
                position: relative;
            }
        }

        @media (min-width: 1370px) {
            .form-box {
                width: 500px;
                height: 380px;
                position: absolute;
                top: 70px;
                right: 250px;
            }

            .loginscreen {
                text-align: right;
                height: 600px;
                position: relative;
            }
        }


        .tit {
            height: 20px;
            line-height: 20px;
            text-align: center;
            position: relative;
        }

        .tit h3 {
            font-size: 16px;
            color: #8c8c8c;
            padding: 0 15px;
            display: inline-block;
            position: relative;
            z-index: 2;
            background-color: #fff;
        }

        .tit span {
            position: absolute;
            z-index: 1;
            left: 0;
            right: 0;
            top: 12px;
            height: 1px;
            border-bottom: 1px dashed #e5e5e5;
        }

        .footer {
            position: relative;
            text-align: center;
            padding-top: 25px;
            bottom: 0;
        }

        .footer, .footer a {
            color: rgba(85, 85, 85, .5);
        }

        .form-group {
            text-align: left;
            margin-bottom: 25px;
        }

        label {
            margin-bottom: 10px;
        }

        .tabs-container .tabs-left > .nav-tabs {
            float: left;
            width: 30%;
            background-color: #f5f5f5;
            padding: 10px 0 10px 10px;
        }

        .tabs-container .tabs-left .panel-body {
            width: 80%;
            /**margin-left: 30%;**/
        }

        .nav.nav-tabs li {
            background: none;
            border: none;
        }

        .tabs-container .nav-tabs > li {
            float: left;
            margin-bottom: -1px;
        }

        .tabs-container .tabs-left > .nav-tabs > li > a {
            margin-right: -1px;
            -webkit-border-radius: 4px 0 0 4px;
            -moz-border-radius: 4px 0 0 4px;
            border-radius: 4px 0 0 4px;
            padding-top: 15px;
            padding-bottom: 15px;
        }

        .tabs-container .nav-tabs > li.active > a, .tabs-container .nav-tabs > li.active > a:hover {
            background-image: url("http://www.hngpmall.com/public/static/images/arrow.gif");
            background-repeat: no-repeat;
            background-position-x: 101%;
            background-position-y: 50%;
        }

        .navbar-dark .nav > li > a:focus, .nav > li > a:hover {
            color: #4583c5;
        }

        .tabs-container .nav-tabs > li.active > a,
        .tabs-container .nav-tabs > li.active > a:hover,
        .tabs-container .nav-tabs > li.active > a:focus {
            background-color: #4583c5;
            color: #fff;
        }

        .tabs-container .tabs-left > .nav-tabs > li > a, .tabs-container .tabs-right > .nav-tabs > li > a {
            min-width: 74px;
            margin-right: 0;
            margin-bottom: 3px;
        }

        .tabs-container .tabs-left > .nav-tabs > li, .tabs-container .tabs-right > .nav-tabs > li {
            float: none;
        }

        .tabs-container .tabs-left > .nav-tabs .active > a {
            border-color: #e7eaec transparent #e7eaec #e7eaec;
        }

        .tabs-container .nav-tabs > li a:hover {
            background: transparent;
            border-color: transparent;
        }

        .tabs-container .tabs-left .tab-pane .panel-body {
            padding-bottom: 0;
            border: none;
        }
    </style>
</head>
<body>
<div class="header">
    <a href="/">
        <img class="logo-name" style="height: 80px;" src="https://www.curr.cn/css/logo.png" alt="舆时分类信息网">
    </a>
    <h2 class="hidden-xs">用户登录中心</h2>
</div>
<div class="middle-box text-center loginscreen">
    <div class="tabs-container form-box white-bg animated fadeInDown" style="border-radius: 10px;">
        <div class="tabs-left">
            <div class="tab-content">
                <div id="tab-1" class="tab-pane active">
                    <div class="panel-body" style="margin-left: 11%;">
                        <form class="m-t" role="form" id="theForm">
                            <input type="hidden" name="module" id="module">
                            <div class="form-group m-t-lg">
                                <label>用户名</label>
                                <input type="text" name="username" class="form-control" placeholder="请输入账号" value=""/>
                            </div>
                            <div class="form-group">
                                <label>密码</label>
                                <input type="password" name="password" class="form-control" placeholder="请输入密码" value=""/>
                            </div>
                            <button type="button" class="tncode btn btn-success block full-width m-b" style="border: none;" data-style="expand-right" id="sub_btn">登录</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<div class="footer">
    <p class="copyright_info">
        ICP备案证书号:<a href="http://www.beian.miit.gov.cn" target="_blank"> 豫ICP备17045442号-2</a>
    </p>
    <p>
        POWERED BY <a href="/" target="_blank">舆时分类信息网</a> v1.0.0
    </p>
</div>
<script>
    var class_name = 'toast-top-center';
    if (window.innerWidth < 768) {
        class_name = 'toast-top-full-width';
    }
    toastr.options = {
        closeButton: true,
        progressBar: true,
        positionClass: class_name,
        showMethod: 'slideDown',
        timeOut: 3000
    };
    $(function () {
        let msg = getQueryVariable('msg');
        let module = getQueryVariable('module');
        if (module) {
            // $('.nav-tabs li').removeClass('active');
            // $('.nav-tabs a[data-tit="' + module + '"]').parent().addClass('active');
            $('#module').val(module);
        }
        if (msg) {
            toastr.error(msg);
        }
        // $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
        //     history.pushState(null, null, '?module=' + e.target.dataset.tit);
        // });

        $('#sub_btn').on('click', function () {
            let obj = $('.nav-tabs li.active a');
            // $('#module').val(obj.data('tit'));
            if (document.querySelector('input[name="username"]').value.length < 2) {
                toastr.error('请输入账号');
                document.getElementByClassName('hgroup').classList.add('lock');
            } else if (document.querySelector('input[name="password"]').value.length < 6) {
                document.getElementByClassName('hgroup').classList.add('lock');
                toastr.error('请输入密码，至少6位');
            } else {
                document.getElementByClassName('hgroup').classList.remove('lock');
            }
        });

        $('input[name="password"]').on('keydown', function (e) {
            if (e.keyCode == 13) {
                $('#sub_btn').trigger('click');
            }
        });

        tncode.init({
            imageUrl: '/public/adminmake',
            submit: '/public/adminlogin',
            form: 'theForm',
            method: 'post',
            success: '0',
            onsuccess: function (res) {
                location.href = '/admin';
            }
        });
    });

    function getQueryVariable(variable) {
        var query = decodeURIComponent(window.location.search.substring(1));
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return (false);
    }
</script>
</body>
</html>
